import { Button, Form, Input, Radio, Space, Select, Checkbox } from "antd";
import React from "react";
import { phoneReg } from '@/utils/regexp'
import { apiPersonnelAdd, apiPersonnelEdit } from '@/request/writeOff'
import _ from 'lodash'
const { Option } = Select
class Add extends React.Component {
  state = {
    btnLoading: false
  }
  componentDidMount() {
    const { type, verificationPersonnelId, editorValue } = this.props
    if (type === 'edit') {
      this.setState({
        verificationPersonnelId,
        type
      }, () => {
        this.formRef.setFieldsValue({ ...editorValue })
      })
    } else {
      this.setState({ type })
    }
  }
  /**
* @desc 确认自定义密码验证
* @params Reg {rule} 验证规则
* @params string {value} 需要验证的字符串
* @params fun {callback} 回调函数
* */
  validatePassword = (rule, value, callback) => {
    const password = this.formRef.getFieldsValue(['password']).password;
    if (value !== password) {
      callback('确认两次输入的密码一致')
    }
    callback()
  }
  onFinish = async values => {
    this.setState({ btnLoading: true })
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    if (this.state.type === 'add') {
      let res = await apiPersonnelAdd({ ...values })
      if (res.code === 0) {
        this.props.closeDialog()
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.props.reload()
        this.setState({ btnLoading: false })
      } else {
        this.setState({ btnLoading: false })
      }
    } else {
      let res = await apiPersonnelEdit({ ...values, verificationPersonnelId: this.state.verificationPersonnelId })
      if (res.code === 0) {
        this.props.closeDialog()
        React.$message({
          type: 'info',
          content: '修改成功'
        })
        this.props.reload()
        this.setState({ btnLoading: false })
      } else {
        this.setState({ btnLoading: false })
      }
    }

  }
  render() {
    const options = [
      {
        label: "启用",
        value: "Y",
      },
      {
        label: "禁用",
        value: "N",
      },
    ];
    const menus = [
      {
        value: '1',
        label: '扫码核销',
      },
      {
        value: '2',
        label: '核销记录',
      },
      {
        value: '3',
        label: '核销数据',
      },
      {
        value: '4',
        label: '打车任务',
      },
      {
        value: '5',
        label: '自配送',
      },
    ]
    return (
      <div>
        <Form labelCol={{ span: 7 }} labelAlign="right" ref={ref => this.formRef = ref} onFinish={this.onFinish}
          initialValues={{
            'userPower': ['1', '2'],
          }}>
          <Form.Item label="账号" name="loginName" rules={[{ required: true, message: '请输入用户名' },
          { pattern: /^[0-9a-zA-Z]+$/, message: '只能输入数字与英文字母' }]}>
            <Input placeholder="请输入账号" />
          </Form.Item>
          <Form.Item label="密码" name="password" rules={[{ required: this.state.type === 'add', message: "请输入密码" }, {
            pattern: /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/,
            message: "密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：abcd@1234"
          }]}>
            <Input placeholder="请输入密码" />
          </Form.Item>
          <Form.Item label="确认密码" name="confirmPassword" rules={[{ required: this.state.type === 'add', message: "请确认密码" }, { validator: this.validatePassword }]}>
            <Input placeholder="请再次输入密码" />
          </Form.Item>
          <Form.Item label="核销员姓名" name="userName" rules={[{ required: true }]}>
            <Input placeholder="请输入核销员姓名" maxLength={20} />
          </Form.Item>
          <Form.Item label="联系方式" name="userMobile" rules={[{ required: true, message: "请输入手机号" }, { pattern: phoneReg, message: '请输入正确手机号' }]}>
            <Input placeholder="请输入联系方式" maxLength={11}/>
          </Form.Item>

          <Form.Item label="选择角色" name="verificationMemberType" rules={[{ required: true, message: "请选择角色" }]}>
            <Select
              placeholder="请选择角色"
              options={[
                {
                  value: 'P',
                  label: '核销员',
                },
                {
                  value: 'D',
                  label: '配送员',
                },{
                  value: 'S',
                  label: '店长',
                },
              ]}
            />
          </Form.Item>
          {/*<Form.Item label="菜单权限" name="userPower" rules={[{ required: true, message: "请选择菜单权限" }]}>*/}
          {/*  <Checkbox.Group*/}
          {/*    style={{*/}
          {/*      width: '100%',*/}
          {/*    }}*/}
          {/*  >*/}
          {/*    {*/}
          {/*      menus.map(item => <Checkbox value={item.value}>{item.label}</Checkbox>)*/}
          {/*    }*/}

          {/*  </Checkbox.Group>*/}

          {/*</Form.Item>*/}
          <Form.Item label="账号状态" name="verificationStatus" rules={[{ required: true }]}>
            <Radio.Group options={options} />
          </Form.Item>
          <Form.Item>
            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: -30 }}>
              <Space>
                <Button onClick={this.props.closeDialog}>取消</Button>
                <Button loading={this.state.btnLoading} htmlType="submit" type="primary">保存</Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Add;
